import React, { useEffect, useState } from 'react'
import { Button, Table, Tag, Modal,Popover,Switch } from 'antd';
import axios from 'axios';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal



function RightList() {
  const [dataSource, setdataSource] = useState([])
  const getList = async () => {
    var res = await axios.get("/rights?_embed=children")
    // res.data[0].children=''
    var list = res.data
    list.forEach(item => {
      if (item.children.length === 0) {
        item.children = ''
      }
    });
    setdataSource(res.data)
  }
  useEffect(() => {
    getList()
  }, [])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      key: 'key',
      render:
        (key) => {
          return <Tag color="geekblue">{key}</Tag>

        }

    },
    {
      title: '操作',
      dataIndex: '',
      key: 'key',
      render: (item) =>
        <div>
      <Popover
        content={<div style={{textAlign:"center"}}>
          <Switch checked={item.pagepermission} onClick={()=>changePagepermission(item)}/>
          </div>}
        title="配置项"
        trigger={item.pagepermission!=undefined?'click':''}
        // visible={this.state.visible}
        // onVisibleChange={this.handleVisibleChange}
      >
          <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={item.pagepermission==undefined}></Button>

      </Popover>
          
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} ></Button>
        </div>
    },
  ];
  const confirmMethod = (item) => {
    confirm({
      title: 'Are you sure delete this task?',
      icon: <ExclamationCircleOutlined />,
      // content: 'Some descriptions',
      // okText: 'Yes',
      // okType: 'danger',
      // cancelText: 'No',
      onOk() {
        deleteItem(item)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const changePagepermission=async(item)=>{
    item.pagepermission=item.pagepermission===1 ? 0 : 1 
    setdataSource([...dataSource])
    // var res = await axios.put('/rights/' + item.id,item)
    if (item.grade===1){
      var res =axios.patch(`/rights/${item.id}`,{pagepermission:item.pagepermission})
    }else{
      console.log(item);
      var res =axios.patch(`/children/${item.id}`,{pagepermission:item.pagepermission})

    }
    console.log(res);
  }
  const deleteItem = async (item) => {
    if (item.grade === 1) {
      setdataSource(dataSource.filter(data => data.id != item.id))
      var res = await axios.delete('/rights/' + item.id)
    }else{
      let list = dataSource.filter(data=>data.id===item.rightId)
      list[0].children=list[0].children.filter(data=>data.id!==item.id)
      console.log(list);
      setdataSource([...dataSource])
      var res = await axios.delete('/children/' + item.id)


    }

  }

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{
        pageSize: 5,
      }} />;

    </div>
  )
}
export default RightList
